<template>
  <!--用户信息和搜索导航栏-->
  <div>
    <div class="first-bar">
      <div style="max-width: 1600px;margin: auto;overflow: hidden;height: 61px">
      <el-menu mode="horizontal" :default-active="defaultActiveState">
        <el-menu-item style="width: 10%;"/>
        <el-menu-item index="1">
          <el-image :src="global.recommendImg+'/static/img/icon.jpg'" style="height: 50px;width: 100px" />
        </el-menu-item>
        <el-menu-item index="2">
          <div @click="backFirstPage()">社区</div>
        </el-menu-item>
        <el-menu-item index="3">
          <div @click="goCommunity()">文章</div>
        </el-menu-item>
        <el-menu-item index="4">
          <div @click="goVideo()">视频</div>
        </el-menu-item>
        <el-menu-item/>
        <el-menu-item index="5" style="width: 30%;">
          <el-input style="width: 75%" v-model="searchContent" placeholder="请输入搜索内容" clearable/>
          <el-button type="primary" round icon="el-icon-search" @click="goSearchArticle()">搜索</el-button>
        </el-menu-item>
        <el-menu-item style="width: 2%"/>
        <el-submenu index="6">
          <template slot="title">
            <div style="display:inline-block">
              <el-avatar :size="25" :src="users.usersPortrait"/>
            </div>
            <div style="display:inline-block">
              {{ users.usersName }}
            </div>
          </template>
          <el-menu-item index="6-1" @click="goUsersMessage()">查看信息</el-menu-item>
          <el-menu-item index="6-2" @click="goUsersUpdate()">修改信息</el-menu-item>
          <el-menu-item index="6-3" @click="logOut()">退出登录</el-menu-item>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title">消息中心</template>
          <el-menu-item index="7-1" @click="goReplyComment()">文章评论</el-menu-item>
          <el-menu-item index="7-2" @click="goChat()">聊天消息</el-menu-item>
        </el-submenu>
        <el-menu-item index="8">
          <template slot="title">
            <div @click="goCreator(users.usersId)">创作中心</div>
          </template>
        </el-menu-item>
      </el-menu>
      </div>
    </div>
    <br>
  </div>
</template>
<script>
import request from "../utils/request";
import newVue from '../utils/newVue'
export default {
  name: "navigation",
  data: function (){
    return{
      defaultActiveState:'0',
      users:{},
      searchContent:"",
      informCommentData:[],
      webSock:'',
      chatAdviceData:{}
    }
  },
  methods:{
    goCreator(usersId){
      this.$router.push({
        path:'/creator/'+usersId
      })
    },
    initWebSocket: function () {
      this.webSock= new WebSocket(this.global.websocketLink+this.users.usersId);
      this.webSock.onerror = this.websocketOnError;
      this.webSock.onmessage=this.websocketOnMessage;
    },
    websocketOnMessage:function (event){
      if (event.data.includes("{")){
        this.chatAdviceData=JSON.parse(event.data);
        let targetRouter= '/messageCenter/chat/'+this.chatAdviceData.chatKey+'/'+this.chatAdviceData.chatUser
        if (this.$route.path===targetRouter){
          newVue.$emit("newMessage",this.chatAdviceData.newMessage);
        }
        return
      }
      if (event.data !== '没有新消息'){
        this.$notify({
          title: '消息中心',
          type: 'success',
          message: event.data,
          offset: 70
        });
      }
    },
    websocketOnClose: function () {
      console.log("socket已经关闭")
    },
    websocketOnError: function () {
      console.log("WebSocket连接发生错误");
    },
    goChat(){
      this.$router.push({
        path:"/messageCenter/chat",
      })
    },
    goReplyComment(){
        this.$router.push({
          path:"/messageCenter/comment",
      })
    },
    goSearchArticle(){
      if (this.searchContent === ''){
        this.$message({
          type:"warning",
          message:"请输入想搜索的内容~",
          offset:75
        })
        return
      }
      request.get('/article/searchLikeArticle/'+this.searchContent).then((res)=>{
        sessionStorage.setItem("searchArticleSize",JSON.stringify(res.data.articleNum))
        sessionStorage.setItem("searchPostSize",JSON.stringify(res.data.postNum))
        sessionStorage.setItem("searchArticleContent",JSON.stringify(res.data.multipleArticleList))
        if (this.$route.path === "/searchArticle"){
          location.reload()
        }
        this.$router.push({path:"/searchArticle"})
      })
    },
    goCommunity(){
      this.$router.push("/community")
    },
    goVideo(){
      this.$router.push("/video")
    },
    backFirstPage(){
      this.$router.push("/")
    },
    goUsersUpdate(){
      this.$router.push("/userUpdate")
    },
    goUsersMessage(){
      this.$router.push("/userHome/"+this.users.usersId)
    },
    logOut(){
      this.webSock.onclose = this.websocketOnClose
      localStorage.removeItem("userData");
      this.$router.push("/login");
    },
  },
  watch:{
    '$route.path': {
      handler(toPath){
        let usersRoute=JSON.parse(localStorage.getItem("userData"));
        if (toPath === "/" || toPath === "/focus" || toPath === "/hot"){
          this.defaultActiveState="2"
        } else if(toPath === ('/community')){
          this.defaultActiveState="3"
        } else if(toPath === ('/video')){
          this.defaultActiveState="4"
        } else if(toPath === ('/userHome/'+usersRoute.usersId) || toPath === "/userUpdate" || toPath === ('/attention/'+usersRoute.usersId) || toPath === ('/collect/'+usersRoute.usersId)){
          this.defaultActiveState="6-1"
        } else if(toPath === ('/messageCenter/comment')){
          this.defaultActiveState="7-1"
        } else if(toPath === ('/creator/'+usersRoute.usersId)){
          this.defaultActiveState="8"
        } else if(toPath === "/searchArticle"){
          this.defaultActiveState="5"
        }
      },
      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    }
  },
  created() {
    this.users=JSON.parse(localStorage.getItem("userData"))
  },
  mounted() {
    this.initWebSocket();
  },
  destroyed () {
    // 销毁监听
    this.webSock.onclose = this.websocketOnClose
  }
}
</script>

<style scoped>
.first-bar{
  z-index: 100;
  position: fixed;
  width: 100%;
  box-shadow: 0 2px 59px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

a{
  text-decoration:none;
  size: 100px;
  margin-right: 3%;
}

</style>
